<template>
	<view>
		<view class="unpaid-amount">
			<view class="unpaid">
				待支付金额
			</view>
			<view class="amount">
				￥{{totalPrice}}
			</view>
		</view>
		<view class="select-method">
			选择支付方式
		</view>

		<view class="methods">

			<radio-group name="method" @change="getRadioVal">
				<view class="balance">
					<label>
						<radio :value="1" :disabled="userInfo.balance==0 ||userInfo.balance<totalPrice
" color="#D80E0E" />
						<image src="/static/icons/settlement_balance_chart@2x.png" class="method-pic"></image> <text
							class="txt">余额</text>
						<text class="num">(账户余额：{{userInfo.balance}}元)</text>
					</label>
				</view>
				<view class="weChat">
					<label>
						<radio :value="2" color="#D80E0E" />
						<image src="/static/icons/settlement_balance_weixin@2x.png" class="method-pic"></image><text
							class="txt">微信</text><text class="num">(微信支付：{{wxtotalPrice}}元)</text>
					</label>
				</view>

				<view class="weChat">
					<label>
						<radio :value="3" :disabled="userInfo.balance>totalPrice" color="#D80E0E" />
						<image src="/static/icons/mix.png" class="method-pic"></image><text
							class="txt">余额+微信</text><text class="num">(账户余额：{{userInfo.balance}}元)</text>
					</label>
				</view>
			</radio-group>

		</view>

		<view class="ensure-pay" @click="insertPwd">
			确认
		</view>
	</view>
</template>

<script>
	import md5 from '@/common/md5.js';
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				showInsertPwd: false,
				openId: '', // 预订单信息
				orderId: '', // 预订单信息
				orderData: {}, // 微信支付参数
				paySign: '',
				totalPrice: 0, // 待支付金额
				wxtotalPrice: 0,
				checkMethods: '2', // 选择的支付方式
				wePayChecked: '', // 微信支付选中
				accountChecked: '', // 余额支付选中
				amount: '0', // 余额支付
				pay_way: '0' // 支付方式	0 未选择 1 余额 2 微信
			};
		},
		onLoad(option) {
			console.log(option)
			// console.log(uni.getStorageSync('openId'), option.orderNum)
			this.openId = uni.getStorageSync('openId')
			this.orderId = option.orderNum
			this.totalPrice = option.totalPrice
			this.wxtotalPrice = option.totalPrice
			// this.appWxOrderAdd() // 生成预订单
		},
		methods: {
			getRadioVal(e) {
				console.log(e.detail.value)
				let type = e.detail.value
				if (type == '1') {
					this.pay_way = '1'
					this.amount = this.totalPrice.toString()
				}

				if (type == '2') {
					this.pay_way = '2'
					this.amount = '0'
				}
				if (type == '3') {
					this.pay_way = '3'
					this.amount = (this.userInfo.balance).toString()
				}


			},
			// 生成预订单
			async appWxOrderAdd() {
					const {
						data: res
					} = await uni.$http.post('/payApi/appwxorderadd', {
						openId: this.openId,
						orderId: this.orderId,
						amount: this.amount,
						userId: this.userInfo._id,
						pay_way: this.pay_way
					})

					if (res.success == '0') {
						console.log(res)
						this.orderData = res.data.param

						this.paySign = md5.hexMD5('appId=' + res.data.param.appid + '&nonceStr=' + res.data.param
							.noncestr +
							'&package=' + 'prepay_id=' + res.data.param.prepayid + '&signType=MD5&timeStamp=' + res
							.data
							.param.timestamp + '&key=' + res.data.key).toUpperCase();

						// 2.1纯微信支付
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: this.orderData.timestamp + '',
							nonceStr: this.orderData.noncestr,
							package: 'prepay_id=' + this.orderData.prepayid,
							signType: 'MD5',
							paySign: this.paySign,
							success: function(res) {
								console.log('success:' + JSON.stringify(res));
								// 支付成功后返回到订单列表
								uni.setStorageSync('btnNum','0')
								uni.redirectTo({
									url: '/subpkg/order-list/order-list'
								})
								uni.$showMsg('支付成功!')
								return
							},
							fail: function(err) {
								console.log('fail:' + JSON.stringify(err));
								uni.$showMsg('支付失败!')
								uni.reLaunch({
									url: '/subpkg/order-list/order-list'
								})
								// uni.redirectTo({
								// 	url:'/subpkg/order-list/order-list'
								// })
							}
						});
					} else {
						uni.$showMsg(res.msg)

					}




			},
			// 输入密码
			async insertPwd() {
				console.log('确认')
				// 至少选择一种支付方式
				if (this.pay_way != '0') {
					// 1.调用 uni.requestPayment() 发起微信支付
					// 1.1 选择了余额  未选择微信 ：判断余额是否足够支付
					if (this.pay_way == '1') {
						// 1.1.1 余额不足以支付
						if (this.totalPrice > this.userInfo.balance) {
							uni.$showMsg('余额不足以支付，请选择微信支付!')
						} else {
							// 1.1.2 全余额支付：调接口扣余额
							const {
								data: res
							} = await uni.$http.post('/order/submitPayAmount', {
								orderId: this.orderId,
								userId: this.userInfo._id
							})
							console.log(res)
							if (res.success == '0') {
								uni.$showMsg('支付成功!')
								// 支付成功后返回到订单列表
								uni.reLaunch({
									url: '/subpkg/order-list/order-list'
								})
							}else{
								console.log(res)
							}
						}
					} else if (this.pay_way == '2' || this.pay_way == '3') {
						this.appWxOrderAdd()

					} else {
						// 3.1 需要调微信支付以及余额支付两个api
						uni.$showMsg('请选择支付方式!')

					}
					// 没有选择支付方法
				} else {
					uni.$showMsg('请选择支付方式!')
				}

			},
		},
		computed: {
			...mapState('m_user', ['userInfo'])
		}
	}
</script>

<style lang="scss">
	.unpaid-amount {
		height: 330rpx;
		text-align: center;

		.unpaid {
			margin-top: 45rpx;
			font-size: 48rpx;
			color: #666666;
			font-weight: 500;
		}

		.amount {
			font-size: 72rpx;
			font-weight: bold;
			color: #EC2222;
			margin-top: 30rpx;
		}
	}

	.select-method {
		padding-left: 25rpx;
		font-size: 36rpx;
		font-weight: 500;
		color: #333333;
	}



	.methods {
		height: 400rpx;
		padding: 0 25rpx;

		.txt {
			font-size: 36rpx;
			font-weight: bold;
			color: #333333;
		}

		.method-pic {
			width: 106rpx;
			height: 106rpx;
			border-radius: 8rpx;
			vertical-align: middle;
			margin: 0 35rpx;
		}

		.balance {
			height: 200rpx;
			line-height: 200rpx;
			position: relative;
		}

		.weChat {
			height: 200rpx;
			line-height: 200rpx;
			position: relative;
		}

		.num {
			position: absolute;
			right: 0;
			font-size: 30rpx;
			font-weight: 400;
			color: #333333;
		}
	}

	radio-group .wx-radio-group-input {
		border-radius: 50% !important;
		color: #ffffff !important;
	}

	radio-group .wx-radio-group-input.wx-radio-group-input-checked {
		color: #fff;
		background: #D80E0E;
	}


	.ensure-pay {
		width: 702rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background: #D80E0E;
		border-radius: 10rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #FFFFFF;
		margin: auto;
		position: fixed;
		bottom: 60rpx;
		left: 50%;
		transform: translateX(-50%);
	}


	.pwd-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .6);
	}
</style>
